<template>
  <Modal class="w-3/5" title="选择小区所在位置">
    <!-- 地图容器 -->
    <div id="mapContainer" style="width: 100%; height: 500px">
      <!-- <div class="searchBox">
        <a-input-search
          v-model:value="region"
          placeholder="请输入地点名称"
          enter-button="搜索"
          size="mini"
          @search="onSearch"
        />
      </div> -->
    </div>
  </Modal>
</template>

<script setup>
defineOptions({
  name: 'MapModel',
});

import { ref, reactive, onMounted, computed } from 'vue';
import { queryAddress } from '../data/api';
import { useVbenModal } from '@vben/common-ui';

const region = ref('');

const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
});

const emit = defineEmits(['update:modelValue', 'changeType']);
const map = ref(null);
const coordinate = ref('');
const center = computed(() => {
  let pointArr = coordinate.value
    ? coordinate.value.split(',')
    : [34.727489, 113.752653];
  return new TMap.LatLng(pointArr[0], pointArr[1]);
}); // 设置地图中心点
const marker = ref(null);
const initMap = () => {
  map.value = new TMap.Map(document.getElementById('mapContainer'), {
    center: center.value, // 地图中心点
    zoom: 15, // 缩放级别
    mapStyleId: 'style1', // 地图样式
  });
  //绑定点击事件
  map.value.on('click', function (evt) {
    let lat = evt.latLng.getLat().toFixed(6);
    let lng = evt.latLng.getLng().toFixed(6);
    console.log(lat + ',' + lng);
    coordinate.value = lat + ',' + lng;
    removeMarker();
    createMarker();
  });
  setTimeout(() => {
    removeMarker();
    createMarker();
  }, 100);
};

//创建marker事件
const createMarker = () => {
  if (!marker.value && coordinate.value) {
    let pointArr = coordinate.value.split(',');
    marker.value = new TMap.MultiMarker({
      id: 'marker-layer',
      map: map.value,
      styles: {
        marker: new TMap.MarkerStyle({
          width: 25,
          height: 35,
          anchor: { x: 16, y: 32 },
          src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png',
        }),
      },
      geometries: [
        {
          id: 'demo',
          styleId: 'marker',
          position: new TMap.LatLng(pointArr[0], pointArr[1]),
          properties: {
            title: 'marker',
          },
        },
      ],
    });
  }
};
//移除marker事件
const removeMarker = () => {
  if (marker.value) {
    marker.value.setMap(null);
    marker.value = null;
  }
};

const [Modal, modalApi] = useVbenModal({
  draggable: true,
  onConfirm: () => confirm(),
});

// 确定
const confirm = () => {
  if (!coordinate.value) return;
  emit('update:modelValue', coordinate.value);
  modalApi.close();
  setTimeout(() => {
    emit('changeType', false);
  }, 100);
};
// 打开弹窗
const open = (data) => {
  coordinate.value = data;
  console.log(coordinate.value);
  modalApi.open();
  setTimeout(() => {
    initMap();
  }, 200);
};

// 地址搜索
const onSearch = async () => {
  let res = await queryAddress(region.value);
  console.log(res);
};

defineExpose({
  open,
});
</script>

<style lang="scss" scoped>
.control-container {
  position: absolute;
  top: 0;
  left: 0;
  // z-index: 1000;
  display: flex;
  align-items: center;
}
.searchBox {
  position: absolute;
  padding: 10px;
  width: 240px;
  height: 80%;
  left: 10px;
  top: 10px;
  border-radius: 6px;
  background: #ffffff;
  z-index: 1001;
}
</style>
